<template>
  <div>
    <el-row>
      <el-col span=1>
        <div class="icon"><i class="el-icon-s-grid"></i></div>
      </el-col>
      <el-col span=3 >
        <el-input type="text" v-model="input" placeholder="按照名字查询" prefix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col span=2 >
        <el-button type="primary" icon="el-icon-search" v-on:click="findByUsername">搜索</el-button>
      </el-col>
      <el-col span="12"></el-col>
      <el-col span=3>
        <el-button type="primary" icon="el-icon-search" v-on:click="findAll">全部查询</el-button>
      </el-col>
    </el-row>
    <div id="tab">
      <el-table
        :data="tableData"
        border
        style="width: 980px;margin-left: 200px">
        <el-table-column
          prop="id"
          label="图书id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="title"
          label="图书名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          width="120">
        </el-table-column>
        <el-table-column
          prop="date"
          label="出版日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="press"
          label="出版社"
          width="150">
        </el-table-column>
        <el-table-column
          prop="type"
          label="图书类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="islian"
          label="是否连载"
          width="80">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="dialogVisible = true;handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="编辑信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form style="margin-left: 60px">
          <el-form-item>
            <el-row>
              <el-col span="4">
                图书名称：
              </el-col>
              <el-col span="8">
                <el-input type="text" v-model="input_name" ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col span="4">
                图书作者：
              </el-col>
              <el-col span="8">
                <el-input type="text" v-model="input_author" ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col span="4">
                图书类型：
              </el-col>
              <el-col span="8">
                <el-select v-model="select_type"  placeholder="图书类型">
                  <el-option label="文学" value="文学"></el-option>
                  <el-option label="文化" value="文化"></el-option>
                  <el-option label="生活" value="生活"></el-option>
                  <el-option label="科技" value="科技"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col span="4">
                出版社：
              </el-col>
              <el-col span="8">
                <el-select v-model="select_press"  placeholder="出版社">
                  <el-option label="北京大学出版社" value="清华大学出版社"></el-option>
                  <el-option label="清华大学出版社" value="北京大学出版社"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false;update()">确 定</el-button>
      </span>
      </el-dialog>
    </div>
    <div id="page">
      <el-pagination
        @current-change="handleSizeChange"
        background
        page-size="6"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'manage_index',
  data () {
    return {
      tableData: [],
      input: '',
      total: '',
      TotalData: [],
      dialogVisible: false,
      input_name: '',
      input_author: '',
      select_type: '',
      select_press: '',
      current_id: ''
    }
  },
  methods: {
    handleClick (row) {
      this.input_name=row.title
      this.input_author=row.author
      this.current_id=row.id
    },
    update () {
      console.log("123")
      this.$axios
        .post('/update_book',{
          title: this.input_name,
          author: this.input_author,
          type: this.select_type,
          press: this.select_press,
          id: this.current_id
        })
        .then(successresponse => {
          alert("修改成功！")
        })
    },
    handleClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ =>{})
    },
    deleteClick (row) {
      console.log(row.username)
      this.$axios
        .post('/delete_book',{
          title: row.title
        })
        .then(successReponse => {
          alert("删除成功！")
        })
    },
    handleSizeChange (val) {
      this.tableData = []
      console.log(this.TotalData)
      if (this.TotalData.length < val*6){
        for (var i = (val-1)*6;i < this.TotalData.length;i++){
          this.tableData.push(this.TotalData[i])
        }
      } else {
        for (var i = (val-1)*6;i < val*6;i++){
          this.tableData.push(this.TotalData[i])
        }
      }
    },
    findAll () {
      this.$axios
        .post('/findAll_book', {})
        .then(successResponse => {
          this.tableData = []
          for(var j = 0;j < successResponse.data.length;j++){
            this.TotalData.push(successResponse.data[j])
          }
          if (successResponse.data.length > 5) {
            for (var i=0;i < 6;i++){
              this.tableData.push(successResponse.data[i])
            }
          }else {
            for (var i=0;i < successResponse.data.length;i++){
              this.tableData.push(successResponse.data[i])
            }
          }
          this.total = successResponse.data.length
        })
    },
    findByUsername () {
      this.$axios
        .post('/findBy_book',{
          title: this.input
        })
        .then(successResponse => {
          this.tableData = []
          this.total = 1
          this.tableData.push(successResponse.data)
        })
    }
  }
}
</script>

<style scoped>
  #page{
    margin-top: 40px;
  }
  .el-icon-s-grid{
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 30px;
  }
  #tab{
    margin-top: 20px;
  }
</style>
